// const paragraph = document.querySelector("p")
// console.log(paragraph)

// const h1 = document.querySelector("h1")
// console.log(h1)

// const first = document.querySelector("#first")
// console.log(first)


// const hello = document.querySelector("p.hello")
// console.log(hello)

// const p_all = document.querySelectorAll("p")
// console.log(p_all)

// const first = document.getElementById("first")
// document.getElementsByClassName("hello")

// console.log(hello.innerText)

// hello.innerText = "hello javascript"

const p_all = document.querySelectorAll("p")
console.log(p_all)
//p_all = [element , element]

// p_all.forEach(el =>{
//     el.innerText += "hello javascript"
// })

const content = document.querySelector(".content")
//content.innerHTML = `<h2>this is a new h2 </h2>`
const people = ["David", "Julia", "Tom"]
people.forEach(name =>{
    content.innerHTML = content.innerHTML + `<p>${ name }</p>`
})

const link = document.querySelector("a")
console.log(link.getAttribute("href"))

link.setAttribute("href", "https://bilibili.com")
link.innerText = "bilibili"

const hello = document.querySelector(".hello")

hello.style.margin = "50px"
//css color: green;
hello.style.color = "green"
//css font-size: 24px;
hello.style.fontSize = "24px"
//remove margin
hello.style.margin = ""

const btn = document.querySelector("button")
btn.addEventListener("click", btnClickHandle)

//btn.removeEventListener("click", btnClickHandle)

function btnClickHandle(event) {
    console.log(event)
    console.log('btn click!')
}